<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="task07.css">
</head>
<body>
  <!-- 第五题HTML -->
  <h3>第五题</h3>
  <input type="button" value="请点击选择" id="btn">
  <select>
    <option>椰子鸡</option>
    <option>麻辣香锅</option>
    <option>串串</option>
    <option>酸菜鱼</option>
    <option>早茶</option>
    <option>牛肉火锅</option>
    <option>烤肉</option>
  </select>
  
  <!-- 第六题HTML -->
  <h3>第六题</h3>
  <input type="text" value="请输入搜索关键字..." id="search">
  
  <!-- 第七题 -->
  <h3>第七题</h3>
  <div id="outer">
    <div class="erweima hide" id="er">
      <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3220068162,2048592455&fm=26&gp=0.jpg">
    </div>
  </div>

  
  <!-- 第八题HTML -->
  <h3>第八题</h3>
  <div id="inputList">
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
  </div>
  
  
  <!-- 第九题HTML -->
  <h3>第九题</h3>
  <div id="box">
  </div>
  
  
  <!-- 第十题HTML -->
  <h3>第十题(点我点我！！)</h3>
  <ul id="food"></ul>
  
  
  <!-- 第十一题HTML -->
  <h3>第十一题</h3>
  <input type="button" value="点我！点我！" id="clickMe">
  <!-- 第十二题HTML -->
  <h3>第十二题</h3>
  <div class="fath">
    <input type="button" value="开始" id="start">
    <input type="button" value="结束" id="end">
    <div id="el"></div>
  </div>

  
  <!-- 第十三题HTML -->
  <h3>第十三题</h3>
  <div class="lunbo" id="lunbo">
    <ul class="images" id="images">
      <li class="current"><img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603734189199&di=27b911937cd4bae1276dfb1123b6cb56&imgtype=0&src=http%3A%2F%2Fimage.namedq.com%2Fuploads%2F20181006%2F19%2F1538823821-QrIiEnXmAv.jpg">
      </li>
      <li><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2171501866,1747204119&fm=26&gp=0.jpg"></li>
      <li><img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608054366682&di=fb551e62a4b34ab90b3d91e9d8cd477d&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F9%2F566fbffe92559.jpg">
      </li>
      <li><img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603734189200&di=2e86591fb79f4c74a606c7c06c4650cc&imgtype=0&src=http%3A%2F%2Fimage.namedq.com%2Fuploads%2F20180910%2F13%2F1536558305-HmhKJfUiad.jpg">
      </li>
    </ul>
    <div class="btn">
      <a class="leftbtn" id="leftbtn">&lt</a>
      <a class="rightbtn" id="rightbtn">&gt</a>
    </div>
    <ol class="sub" id="sub">
      <li class="current">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ol>
  </div>
<script>
    function $getId(ele) {
      return document.getElementById(ele);
    }
    // 1. 简述绑定事件(注册事件)三要素。
    /* 
      绑定事件包括：
      1.事件源，就是获取某个元素，并给这个元素绑定某事件。该元素即称为事件源。
      2.事件类型，顾名思义，及绑定的是什么类型的时间，比如click，dbclick等点击时间，mouseover，mouseout等鼠标事件。
      3.事件函数，就是事件触发后，发生了什么事情，执行了什么代码，均在事件函数内书写。
      */


    // 2. 简述innerHTML和innerText的区别。
    /* 
      innerHTML和innerText的区别在于：
      innerHTML在获取元素内容是，会获取标签和文字内容；innerText在获取元素内容是，只会获取文字内容，不会获取标签。
      innerHTML可以插入整个元素及元素间的内容，而innerText只能插入文本内容。
    */


    // 3. 简述排他思想制作的思路。
    /* 
      排他思想的制作思路是，如果在相同元素中，选中一个元素，该元素的样式发生变化，而其他元素恢复原来的样式时，可以使用排他思想。即现将所有的元素均恢复为原来的样式，再改变这个选中元素的样式，即可实现。
    */


    // 4. 列举常见的鼠标事件。
    /* 
      常见的鼠标事件有：
      单击事件：click
      双击事件：dbclick
      鼠标移上事件：mouseover
      鼠标移开事件：mouseout
      鼠标按下事件：mousedown
      鼠标放开事件：mouseup
      鼠标移动事件；mousemove
    */

    window.onload = function() {
      // 5. 设置下拉框中的默认随机选中项，自己书写结构和js。
      var btn = $getId("btn");
      btn.onclick = function () {
        // 给一个[0,options.length + 1) 的随机数
        var options = document.getElementsByTagName("option");
        // 随机数向下取整[0,7)之间的整数
        var random = Math.floor(Math.random() * 7);
        // console.log(random);
        // 给选中的option添加selected为true的属性
        options[random].selected = true;
      };
      
      
      // 6. 编写一段程序，实现文本框获取和失去焦点效果。要求：
      // 1、获得焦点时，如果内部内容为提示语 请输入搜索关键字 ，清空内容并且设置文字颜色为黑色；
      // 2、失去焦点时，如果内容为空，恢复默认提示语，并且设置文字颜色为灰色
      
      // 获取元素
      var search = $getId("search");
      // 绑定获得焦点时的事件
      search.onfocus = function () {
        if (this.value === "请输入搜索关键字...") {
          this.value = "";
          this.style.color = "black";
        }
      };
      // 绑定失去焦点时的事件
      search.onblur = function() {
        if (this.value === "" || this.value === "请输入搜索关键字...") {
          this.value = "请输入搜索关键字...";
          this.style.color = "#DADADA";
        }
      };
      
      
      // 7. `<div class="erweima hide" id="er">`，将class的属性值中的hide更换为show，其他保持不变，请写出适合的方法。
      var outer = $getId("outer");
      var er = $getId("er");
      // 用replace方法将hide替换成show，这样就可以保证erweima不会被覆盖掉
      outer.onmousemove = function () {
        // 鼠标移上，将hide替换成show
        er.className = er.className.replace("hide","show");
      }
      outer.onmouseout = function() {
        // 鼠标移开，将show替换成hide
       er.className = er.className.replace("show","hide");
      }
      
      // 8. 有一组文本框，要求让每一个文本框在自己输入的时候，背景显示灰色，其他文本框显示白色。
      
      // 1.获取元素
      var inputList = $getId("inputList").getElementsByTagName("input");
      // 2.给每个input添加focus事件和blur事件
      for (var i = 0; i < inputList.length; i++) {
        inputList[i].onfocus = function () {
          // input获得焦点时，背景颜色变成灰色
          this.style.backgroundColor = "gray";
        };
        inputList[i].onblur = function () {
          // input失去焦点时，背景颜色变成白色
          this.style.backgroundColor = "white";
        };
      }
      
      
      // 9. 在box元素中动态创建无序列表，自定义列表项内容。
      // 获取元素
      var box = $getId("box");
      // 创建ul元素
      var ul = document.createElement("ul");
      // 添加到box元素里面
      box.appendChild(ul);
      // 批量创建li元素并插入内容
      liList = ['火锅','麻辣烫','海底捞','牛肉火锅','刷羊肉'];
      for (var i = 0; i < liList.length; i++) {
        var li = document.createElement("li");
        li.innerText = liList[i];
        ul.appendChild(li);
      }
      
      // 创建dl元素
      var dl = document.createElement("dl");
      // 添加到box元素里面
      box.appendChild(dl);
      // 创建dt和dd元素
      var datas = [{
        title: '食物',
        content: ['火锅', '麻辣烫', '海底捞', '牛肉火锅', '刷羊肉']
      },{
        title: '饮品',
        content: ['奶茶', '快乐肥宅水', '鸡尾酒']
      }];
      
      for(var i = 0; i < datas.length; i++) {
        // 创建dt并插入内容
        var dt = document.createElement("dt");
        dt.innerText = datas[i].title;
        // 添加到dl元素里面
        dl.appendChild(dt);
        for(var k in datas[i].content) {
          // 创建dd并插入内容
          var dd = document.createElement("dd");
          dd.innerText = datas[i].content[k];
          // 添加到dt元素里面
          dt.appendChild(dd);
        }
      }
      
      
      // 10. 利用事件委托的方法，给一个无序列表的列表项添加点击更改背景色事件。简单说明思路。
      // 事件委托方法，是利用事件冒泡的原理，点击子元素，会先触发子元素事件，若此时子元素没有事件可以触发，
      // 则冒泡到父元素，看父元素是否有事件可以触发。在这个过程中，利用事件对象e，可以确定此时点击的元素是
      // 哪一个。因此，只需要给父元素添加一个点击事件，无论点击父元素下的那个子元素，都可以实现事件点击效果
      // 不需要在给每个子元素都绑定事件。
      var food = $getId("food");
      var foodList = food.children;
      var fList = ['部队火锅','寿司','石锅拌饭','椰子鸡','酸菜鱼'];
      // 创建li元素，并插入
      for (var i = 0; i < fList.length; i++) {
        var li = document.createElement("li");
        li.innerText = fList[i];
        food.appendChild(li);
      }
      // 给ul添加事件
      food.onclick = function (e) {
        // 排他思想，先将所有的li背景色都设置为白色
        for(var i = 0; i < foodList.length; i++) {
          foodList[i].style.backgroundColor = "white";
        }
        // 获取事件触发的对象，将点击的元素背景色设置成黄色
        var target = e.target || e.srcElement;
        target.style.backgroundColor = "yellow";
      }
      
      
      // 11. 请自定义一个注册事件的兼容函数，要求兼容三种注册事件方法。
      var clickMe = $getId("clickMe");
      // 调用函数
      addEvent(clickMe, "click", function(){
        alert("调用函数了~");
      });
      // 自定义注册事件的兼容函数
      function addEvent(ele,type,fn) {
        if (ele.addEventListener) {
          ele.addEventListener(type, fn);
        } else if(ele.attachEvent) {
          ele.addEvent("on" + type, fn);
        } else {
          ele["on" + type] = fn;
        }
      }
      
      // 12. 将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户多次点击出现加速且运动不能停止的情况，请给出解决代码。
      /* 
        将定时器开始和结束书写在不同的事件函数内部，当用户多次点击开始时，会开启多个定时器，而储存定时器变量只有一个timer。若多次点击，则timer储存的是最新一次点击的定时器。所以，点击清除时，清除的是最新的定时，其他定时器则没有变量去指向它，因而清除不了。
        解决方法：在开启定时器之前，先将之前的定时器关闭。这样即使多次点击，也能让变量中只存储最新一次定时器。
      */
      // 获取开始，结束按钮, 移动元素
      var startbtn = $getId("start");
      var endbtn = $getId("end");
      var el = $getId("el");
      var nowLeft;
      // 步长
      var step = 3;
      var timer;
      startbtn.onclick = function() {
        // 开启一个定时器之前，要先清除定时器
        clearInterval(timer);
        timer = setInterval(move,100);
      };
      endbtn.onclick = function() {
        clearInterval(timer);
      }
      function move() {
        // 起始位置
        nowLeft = el.offsetLeft;
        console.log(nowLeft);
        nowLeft += step;
        el.style.left = nowLeft + 'px';
      }
      
      // 13. 给 part1-模块2-任务1 的轮播图静态页面添加JS事件，让其成功滚动
      
      var imagesList = $getId("images").getElementsByTagName("li");
      var rightbtn = $getId("rightbtn");
      var leftbtn = $getId("leftbtn");
      // 设置一个信号量
      var signal = 0;
      var timer;
      // 1.点击右按钮，切换下一张照片
      rightbtn.onclick = function() {
        if (signal == imagesList.length - 1) {
          signal = 0;
        } else {
          // 点击下一张图片时，信号量+1
          signal++;
        }
        carousel();
      }
      // 2.点击左按钮，切换上一张照片
      leftbtn.onclick = function() {
        if(signal == 0) {
          signal = imagesList.length - 1;
          console.log(signal);
        } else {
          signal--;
          console.log(signal);
        }
        carousel();
      };
      // 定义一个定时器，让图片间隔1s自动播放下一张
      timer = setInterval(function() {
        if (signal == imagesList.length - 1) {
          signal = 0;
        } else {
          // 点击下一张图片时，信号量+1
          signal++;
        }
        carousel();
      },1000);
      
      // 3.鼠标移上,停止滚动
      var lunbo = $getId("lunbo");
      lunbo.onmouseover = function() {
        clearInterval(timer);
      }
      // 4.鼠标移开,开始滚动
      lunbo.onmouseout = function() {
        timer = setInterval(function () {
          if (signal == imagesList.length - 1) {
            signal = 0;
          } else {
            // 点击下一张图片时，信号量+1
            signal++;
          }
          carousel();
        }, 1000);
      }
      // 5.点击小圆点,播放对应的图片
      var sub = $getId("sub");
      var subList = sub.getElementsByTagName("li");
      for(var i = 0; i < subList.length; i++) {
        // 将下标储存到每个li对象下的index
        subList[i].index = i;
        subList[i].onclick = function() {
          this.className = "current";
          signal = this.index;
          carousel();
        }
      }
   
      // 轮播事件
      function carousel() {
        // 将所有的li清除class
        for (var i = 0; i < imagesList.length; i++) {
          imagesList[i].className = "";
          subList[i].className = "";
        }
        // 只给当前显示的图片添加current的class
        imagesList[signal].className = "current";
        subList[signal].className = "current";
      }
    }
  </script>
</body>
</html>       